<template>
  <div class="ProductionPlan">
    <!-- dafafdafdsfafdaf -->

    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input v-model="formInline.key" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="formInline.time1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chage"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button class="ebtn" type="warning" @click="Event">生产计划表</el-button>
    </div>
    <!-- 列表 -->
    <div class="ProductionPlanList">
      <el-table :data="tableData" height="630px" stripe>
        <el-table-column prop="text" type="index" label="序号" align="center" width="100"></el-table-column>
         <el-table-column prop="productno" label="年份" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="productno" label="产品编号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="productname" label="产品名称" align="center"></el-table-column>
        <el-table-column prop="productype" label="产品类型" align="center"></el-table-column>
        <el-table-column prop="planon" label="计划时间" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="endon" label="结束时间" align="center"></el-table-column>
        <el-table-column prop="overnumber" label="任务进度" align="center"></el-table-column>
        <el-table-column prop="states" label="状态" align="center"></el-table-column>
        <el-table-column prop label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button size="small" type="warning" @click="adjustment(scope.row)">调整</el-button>
            <el-button type="primary" @click="xiangq(scope.row)" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 周计划 -->
    <el-dialog :visible.sync="dialogTableVisible" :modal-append-to-body="false" width="1400px">
      <div class="side_1"></div>
      <span class="add_1">生产计划表</span>
      <!-- 头部 --end-->
      <div class="addplan_box">
        <div class="from_sex">
          <el-row :gutter="5">
            <el-col :span="4">
              <el-form :model="form" class="demo-form-inline" label-width="83px">
                <el-form-item label="计划年份">
                  <el-input></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4">
              <el-form :model="form" class="demo-form-inline" label-width="83px">
                <el-form-item label="计划月份">
                  <el-input></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4">
              <el-form :model="form" class="demo-form-inline" label-width="83px">
                <el-form-item label="编号">
                  <el-input v-model="form.planno"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <div class="from_btn">
              <el-button type="warning" @click="dialogVisible=true">周计划</el-button>
            </div>
          </el-row>
        </div>
        <div class="addplan_table">
          <template>
            <el-table :data="tableDatalist">
              <el-table-column prop="xuhao" type="index" label="序号" align="center" width="79"></el-table-column>
              <el-table-column prop="zhuji" label="主机厂" align="center" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.zhuji"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="产品图号" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.pic"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="产品名称" align="center" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.productname"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="f" label="销量需求" align="center" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.drawingsno"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="需求时间及数量" align="center">
                <el-table-column prop="one" label="1" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input class="needinput" v-model="scope.row.one"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="two" label="2" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.two"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="three" label="3" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.three"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="four" label="4" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.four"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="five" label="5" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.five"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="six" label="6" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.six"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="seven" label="7" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.seven"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="eight" label="8" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.eight"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="nine" label="9" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.nine"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="ten" label="10" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.ten"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="eleven" label="11" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.eleven"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twelve" label="12" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twelve"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="thirteen" label="13" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.thirteen"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="fourteen" label="14" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.fourteen"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="fifteen" label="15" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.fifteen"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="sixteen" label="16" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.sixteen"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="seventeen" label="17" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.seventeen"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="eighteen" label="18" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.eighteen"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="nineteen" label="19" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.nineteen"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twenty" label="20" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twenty"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twenty1" label="21" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twenty1"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twenty2" label="22" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twenty2"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twenty3" label="23" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twenty3"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twenty4" label="24" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twenty4"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twenty5" label="25" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twenty5"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twenty6" label="26" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twenty6"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twenty7" label="27" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twenty7"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twenty8" label="28" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twenty8"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="twenty9" label="29" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.twenty9"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="thirty" label="30" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.thirty"></el-input>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="sale" label="本月合计" align="center" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.sale"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" align="center" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remark"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <el-dialog
        title
        :visible.sync="dialogVisible"
        width="55%"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <div class="table_dia">
          <el-table :data="tableDatas" border>
            <el-table-column prop="first" label="第一周(2日-8日)" align="center"></el-table-column>
            <el-table-column prop="second" label="第二周(9日-15日)" align="center"></el-table-column>
            <el-table-column prop="third" label="第三周(16日-22日)" align="center"></el-table-column>
            <el-table-column prop="fourth" label="第四周(22日-23日)" align="center"></el-table-column>
            <el-table-column prop="fifth" label="第五周(24日-30日)" align="center"></el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <div class="box_btn">
        <el-button @click="Confirm" type="primary">确认</el-button>
        <el-button class="bm_btn" @click="dialogTableVisible = false" type="info">返回</el-button>
      </div>
    </el-dialog>

    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
         
       

<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {},
      tableData: [],
      options: [
        {
          value: "选项1",
          label: "2019"
        }
      ],
      value: "",
      tableDataer: [],
      tableDatas: [
        {
          first: "30",
          second: "30",
          third: "",
          fourth: "30",
          fifth: ""
        }
      ],
      tableDatalist: [
        {
          xuhao: "1",
          zhuji: ""
        },
        {
          xuhao: "1",
          zhuji: ""
        },
        {
          xuhao: "1",
          zhuji: ""
        },
        {
          xuhao: "1",
          zhuji: ""
        },
        {
          xuhao: "1",
          zhuji: ""
        }
      ],
      index: 2,
      formInline: {
        key: ""
      },
      start: "",
      end: "",
      total: 1,
      current: 1,
      pagesize: 10,
      dialogVisible: false,
      dialogVisibles: false,
      dialogTableVisible: false,
      pmonth: ""
    };
  },
  created() {
    this.getlist(0);
    this.Getlist();
  },
  methods: {
    // 生产计划表详情
    Event() {
      this.dialogTableVisible = true;
      axios(
        "/apis/ProductionManagement.asmx/Det?index=20&jsondata=202003"
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log("Eventlist");
        console.log(datas);
        var Eventlist = JSON.parse(datas.string.__text);
        console.log(Eventlist);
        // this.form = this.Eventlist[0].a;
        this.tableDataTy = this.Eventlist;
      });
    },
    //确认
    Confirm() {
      this.dialogTableVisible = false;
      var obj = {
        Id: 1,
        planno: this.form.planon,
        xuhao: this.tableDatalist[0].xuhao,
        zhuji: this.tableDatalist[0].zhuji,
        productno: this.tableDatalist[0].productno,
        sale: this.tableDatalist[0].sale,
        one: this.tableDatalist[0].one,
        two: this.tableDatalist[0].two,
        three: this.tableDatalist[0].three,
        four: this.tableDatalist[0].four,
        five: this.tableDatalist[0].five,
        six: this.tableDatalist[0].six,
        seven: this.tableDatalist[0].seven,
        eight: this.tableDatalist[0].eight,
        nine: this.tableDatalist[0].nine,
        ten: this.tableDatalist[0].ten,
        eleven: this.tableDatalist[0].eleven,
        twelve: this.tableDatalist[0].twelve,
        thirteen: this.tableDatalist[0].thirteen,
        fourteen: this.tableDatalist[0].fourteen,
        fifteen: this.tableDatalist[0].fifteen,
        sixteen: this.tableDatalist[0].sixteen,
        seventeen: this.tableDatalist[0].seventeen,
        eigthteen: this.tableDatalist[0].eigthteen,
        nineteen: this.tableDatalist[0].nineteen,
        twenty: this.tableDatalist[0].twenty,
        twenty1: this.tableDatalist[0].twenty1,
        twenty2: this.tableDatalist[0].twenty2,
        twenty3: this.tableDatalist[0].twenty3,
        twenty4: this.tableDatalist[0].twenty4,
        twenty5: this.tableDatalist[0].twenty5,
        twenty6: this.tableDatalist[0].twenty6,
        twenty7: this.tableDatalist[0].twenty7,
        twenty8: this.tableDatalist[0].twenty8,
        twenty9: this.tableDatalist[0].twenty9,
        thirty: this.tableDatalist[0].thirty,
        thirty1: this.tableDatalist[0].thirty1,
        remark: this.tableDatalist[0].remark,
        isdelete: ""
      };
      var objs = JSON.stringify(obj);
      axios(
        "apis/ProductionManagement.asmx/Save?index=20&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        if (datas.string.__text == "SUCCESS") {
          this.$message.success("保存成功!");
          this.dialogTableVisible = false;
        } else {
          this.$message.error(datas.string.__text);
        }
      });
    },
    week() {
      this.dialogVisibles = true;
    },
    // 调整页面跳转
    adjustment(e) {
      this.$router.push({
        path: "./PlanadJustment",
        query: { name: e }
      });
    },
    // 详情页面跳转
    xiangq(e) {
      this.$router.push({
        path: "./Planxiangq",
        query: { name: e }
      });
    },
    quxiao() {
      this.dialogVisible = false;
    },
    quxiaoBtn() {
      this.dialogVisibles = false;
    },
    // 列表
    getlist(page) {
      var obj = {
        start: this.start,
        end: this.end,
        key: this.formInline.key,
        pn: page,
        PerPageSize: 10
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/List?index=" +
          this.index +
          "&jsondata=" +
          objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log("字符串");
        console.log(datas);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        this.tableData = list;
        for (var i = 0; i < list.length; i++) {
          var dd = new Date(parseInt(list[i].planon.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          list[i].planon = y + "-" + m + "-" + d + " ";
          list[i].xuhao = 1 + i + 10 * page;
        }
        for (var i = 0; i < list.length; i++) {
          var dd = new Date(parseInt(list[i].endon.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          list[i].endon = y + "-" + m + "-" + d + " ";
          list[i].xuhao = 1 + i + 10 * page;
        }
      });
    },
    Getlist() {
      var obj = {
        start: "",
        end: "",
        key: this.formInline.key,
        pn: 0,
        PerPageSize: 10000
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/List?index=" +
          this.index +
          "&jsondata=" +
          objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.total = list.length;
      });
    },
    // 分页
    handleCurrentChange(e) {
      this.getlist(e - 1);
    },
    // 日期改变
    chage(e) {
      console.log("e");
      console.log(e);
      if (e) {
        this.start =
          e[0].getFullYear() +
          "-" +
          (e[0].getMonth() + 1) +
          "-" +
          e[0].getDate();
        this.end =
          e[1].getFullYear() +
          "-" +
          (e[1].getMonth() + 1) +
          "-" +
          e[1].getDate();
      } else {
        this.start = "";
        this.end = "";
      }
    },
    // 筛选
    onsubmit() {
      console.log("e");
      this.getlist(0);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.ProductionPlan {
  width: 99%;
  margin-top: 20px;
  // margin-left: 20px;
}
.ProductionPlanList {
  width: 99%;
  // height: 300px;
  margin-top: 20px;
  margin-left: 15px;
  border: 1px solid $linecolor;
  // max-height: 400px;
}
.plan {
  width: 99%;
  height: 60px;
  // border: 1px solid #000;
}
.needinput {
  width: 90%;
}
.plan_black {
  width: 20%;
  height: 50px;
  margin-left: 15px;
  display: inline-block;
  // border: 1px solid #000;
}
.planinput {
  width: 70%;
}
.plan_low {
  width: 99%;
  // border: 1px solid #000;
}
.low_left {
  width: 44%;
  // height: 99%;
  display: inline-block;
}
.low_right {
  width: 55.5%;
  float: right;
}
.Btn {
  text-align: center;
  margin-top: 20px;
  // border: 1px solid #000;
}
.weekPlan {
  width: 100px;
  height: 40px;
  float: right;
  line-height: 40px;
  text-align: center;
  border: 1px solid $linecolor;
  border-radius: 10px;
  cursor: pointer;
  background-color: #e6a23c;
  color: white;
}
.content_plan {
  width: 99%;
  // height: 80px;
}
.department {
  width: 30%;
  height: 50px;
  // margin-top: 20px;
  margin-left: 15px;
  // border: 1px solid #000;
  display: inline-block;
}
.deparInput {
  width: 55%;
  margin-top: 5px;
}
.content_plans {
  width: 99%;
  // height: 160px;
  // border: 1px solid #000;
}
.content_list {
  width: 99%;
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
  width: 97.5%;
  margin-left: 15px;
}
.ebtn {
  float: right;
  margin-right: 20px;
  // margin-top: -63px;
}
.pgnt {
  text-align: center;
}
.demo-form-inline {
  display: inline-block;
}
.side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  margin-left: 10px;
  margin-top: -20px;
}
.add_1 {
  margin-left: 20px;
  margin-top: -20px;
  float: left;
  font-size: 18px;
  font-weight: 400;
}
.btn_fanhui {
  margin-top: -20px;
  margin-right: 20px;
  float: right;
}
.addplan_box {
  background: $white;
  margin-left: 10px;
  border-radius: 4px;
  .addplan_table {
    width: 98%;
    margin-left: 10px;
  }
}
.btn {
  float: right;
}
.from_sex {
  margin-top: 20px;
}
.from_btn {
  float: right;
  padding-right: 20px;
  margin-top: -50px;
}
.box_btn {
  margin-top: 20px;
  text-align: center;
}
</style>